<html>
<head>
	<script src="plugin/jquery-ui/js/jquery-1.5.1.min.js" type="text/javascript" ></script>
	<script src="plugin/jquery.tmpl/jquery.tmpl.min.js" type="text/javascript" ></script>
</head>
<body >
<style>
#player {
	width : 100px;
	height : 100px;
	background-image: url('images/person/player_actions.png');
	background-repeat: no-repeat;
	background-position: -1600 0;
		
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.l4{
	z-index: 100;
}
#player-window > div {
	position: absolute;
	
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#player-window > div > div {
	width : 100px;
	height: 100px;
	
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

</style>

	<div id="alt-view" style="position:absolute; top:150px; height:100px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:0px; top:0px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:70px; top:0px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:140px; top:0px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:35px; top:15px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:105px; top:15px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:175px; top:15px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:0px; top:30px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:70px; top:30px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:140px; top:30px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:35px; top:45px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:105px; top:45px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:175px; top:45px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:0px; top:60px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:70px; top:60px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:140px; top:60px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:35px; top:75px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_n.png" style="position:absolute; left:105px; top:75px;">
		<img  src="file://c:/repos/mud-assets/target/blender/tiles/hex_wood_1_s.png" style="position:absolute; left:175px; top:75px;">
	</div>
	<div id="objects" style="position:absolute; top:150px; height:100px; z-index: 50">
	</div>
	<div id="player-window">
	<div id="player-container"  class="l4">
		<div id="player"></div>
	</div>
	<div id="objects_n" style="z-index: 50; left:-92px; width:1430px; overflow: hidden;">
	</div>
	<div id="objects_s" style="z-index: 50; top: 108px; left:-92px; width:1430px; height:600px; overflow: hidden;">
	</div>
	<div id="objects_e" style="z-index: 50; left:108px; width:1227px; height:100px; overflow: hidden;">
	</div>
	<div id="objects_w" style="z-index: 50; left:-92px; width:100px; height:100px; overflow: hidden;">
	</div>
	<div id="objects_c" style="z-index: 50; overflow: visible;">
	</div>
	
	</div>
		
	<div>
		<input type="text" id="path" value="c:/repos/mud-assets/target/blender/tiles/" style="width:300px;"><br/>
		<input type="file" id="f1" value="hex_grass_n.png">
	</div>
	<script type="text/x-jquery-tmpl" id="hex">
		<img src="{{= src }}" style="position: absolute; top:{{= top }}; left:{{= left }};" >
	</script>
	<script type="text/javascript">
		var imageSrc = 'hex_grass_n.png';
		
		var objects = [];
		
		UserInputController = function(){
			this.player = $('#player-container');
			this.speed = 10;
			
			this.move = function(field, amount){
				this.moveElement(this.player, field, amount);
				var row = Math.floor((this.player.position().top - 100) / 15);
				
				console.log( row );
				var count = objects[row];
				console.log("row="+row+" count="+ count);
				if(!count){
					$('#objects_c > div > img').hide();				
				}else{
					$('#objects_c > div > img:gt('+count+')' ).hide();
					$('#objects_c > div > img:lt('+count+')' ).show();
				}
				this.moveWindow($('#objects_c'), field, amount);
				this.moveWindow($('#objects_e'), field, amount);
				if( field == 'left' ){
					$('#objects_e').width( $('#objects_e').width() - amount );
					$('#objects_w').width( $('#objects_w').width() + amount );
				}else if( field == 'top'){
					this.moveWindow($('#objects_w'), field, amount);
					this.moveWindow($('#objects_s'), field, amount);
					
					$('#objects_s').height( $('#objects_s').height() - amount );
					$('#objects_n').height( $('#objects_n').height() + amount );
				}				
			}
			this.moveWindow = function(element, field, amount){
				this.moveElement(element, field, amount);
				this.moveElement(element.children().first(), field, -amount);
			}			
			this.moveElement = function(element, field, amount){
				var pos = element.position();
				if( field == 'top' ){
					pos.top += amount;
					element.css('top', pos.top + 'px');
				}
				if( field == 'left' ){
					pos.left += amount;
					element.css('left', pos.left + 'px');
				}
			}
						
			this.moveLeft = function(){
				this.move('left', -this.speed);
			}
			this.moveRight = function(){
				this.move('left', this.speed);
			}
			this.moveUp = function(){
				this.move('top', -this.speed);
			}
			this.moveDown = function(){
				this.move('top', this.speed);
			}
		};
		
		var inputController = new UserInputController();
		
		getImage = function(){
			var f1 = imageSrc
			var path = $('#path').val()
			f1 = f1.substring( f1.lastIndexOf('\\') )
			f1 = f1.substring( 0, f1.length - 5)
			var i = Math.floor(Math.random()*6)
			var ext;
			if( i == 0 ){ ext = 'n' }
			if( i == 1 ){ ext = 's' }
			if( i == 2 ){ ext = 'ne' }
			if( i == 3 ){ ext = 'nw' }
			if( i == 4 ){ ext = 'se' }
			if( i == 5 ){ ext = 'sw' }
			
			return path+f1 + ext + '.png'
		};
	
		placeImage = function(row, col, src, container){
			var tile = {
				top  : row*15,
				left : col*70 - ((row%2)*35),
				src  : src
			};
			$('#hex').tmpl( tile ).appendTo(container);
		};
		
		cloneObjects = function(e1, e2, top, left){
			var clone = e1.clone();
			clone.css('top', top);
			clone.css('left', left);
			e2.append(clone);
		}
		
		$(function(){
			var row = 0;
			var col = 0;
			for(row=0;row <40;row++){
				for(col=0; col < 20; col++){
					placeImage(row, col, getImage(), '#alt-view');
				}
			}
			imageSrc = '../objects/tree_n.png';
			var path = $('#path').val()
			for(col=0; col < 20; col+=2){
				placeImage(-5, col, getImage(), '#objects')
			}
			
			for(col=0; col < 20; col+=2){
				placeImage(0, col, getImage(), '#objects')
			}
			
			for(col=0; col < 20; col+=2){
				placeImage(16, col, getImage(), '#objects')
			}
			
			var e1 = $('#objects');
			
			$('#objects > img').each(function(){
				var top = $(this).position().top + $(this).height();
				var row = Math.floor((top - 100) / 15)+2;
				while( Math.abs(row) >= 0 ){
					if( !objects[row] ) objects[row] = 0;
					objects[row] = objects[row]+1;
					row = (Math.abs(row) - 1) * (row/Math.abs(row));
				}
			});
			var count = $('#objects > img').length;
			for(row=0; row < 40; row++){
				objects[row] = count - (objects[row] ? objects[row] : 0);
			}		
			
			cloneObjects( e1, $('#objects_n'), '100px', '100px' );
			cloneObjects( e1, $('#objects_s'), '0px', '100px' );
			cloneObjects( e1, $('#objects_e'), '100px', '-100px' );
			cloneObjects( e1, $('#objects_w'), '100px', '100px' );
			cloneObjects( e1, $('#objects_c'), '100px', '0px' );
			
			$('#objects').remove();
			
			inputController.moveDown();
		});
				
		$('body').keydown(function(event){
			if(event.keyCode == '38' || event.keyCode == '104' || event.keyCode == '87'){//UP
				inputController.moveUp();
			}else if( event.keyCode == '40' || event.keyCode == '98' || event.keyCode == '83'){//Down
				inputController.moveDown();
			}else if( event.keyCode == '37' || event.keyCode == '100' || event.keyCode == '65'){//Left
				inputController.moveLeft();
			}else if( event.keyCode == '39' || event.keyCode == '102' || event.keyCode == '68'){//Right
				inputController.moveRight();
			}
			//Cancel the action to ensure we don't scroll
			return false;
		});
		
		$("#f1").change(function(){
			imageSrc = $('#f1').val();
			
			$('#view > img, img.a1').each(function(){ 
				var f1 = $('#f1').val()
				var path = $('#path').val()
				f1 = f1.substring( f1.lastIndexOf('\\') )
				$(this).attr('src', path+f1) 
			})
			$('#alt-view > img').each(function(){ 
				
				$(this).attr('src', getImage()); 
			})
		})
				
	</script>
</body>
</html>